import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { List, PickerView, Modal } from "antd-mobile";
import vximg from "../../../images/vximg.png";
import consumption from "../../../images/consumption.png";
import XHQBConfig from "../../../config/XHQBConfig";
import yhTools from "../../../tools/yh";
import { Toast } from "antd-mobile";
import "./index.scss";
const Item = List.Item;
const Brief = Item.Brief;
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const seasons = [
	[
		{
			label: "2020年",
			value: "2020"
		},
		{
			label: "2019年",
			value: "2019"
		},
		{
			label: "2018年",
			value: "2018"
		},
		{
			label: "2017年",
			value: "2017"
		},
		{
			label: "2016年",
			value: "2016"
		},
		{
			label: "2015年",
			value: "2015"
		},
		{
			label: "2014年",
			value: "2014"
		},
		{
			label: "2013年",
			value: "2013"
		},
		{
			label: "2012年",
			value: "2012"
		},
		{
			label: "2011年",
			value: "2011"
		},
		{
			label: "2010年",
			value: "2010"
		},
		{
			label: "2009年",
			value: "2009"
		}
	],
	[
		{
			label: "12月",
			value: "12"
		},
		{
			label: "11月",
			value: "11"
		},
		{
			label: "10月",
			value: "10"
		},
		{
			label: "9月",
			value: "09"
		},
		{
			label: "8月",
			value: "08"
		},
		{
			label: "7月",
			value: "07"
		},
		{
			label: "6月",
			value: "06"
		},
		{
			label: "5月",
			value: "05"
		},
		{
			label: "4月",
			value: "04"
		},
		{
			label: "3月",
			value: "03"
		},
		{
			label: "2月",
			value: "02"
		},
		{
			label: "1月",
			value: "01"
		}
	]
];
export default class Index extends Component {
	state = {
		value: [`${year}`, `${month}`],
		isVisible: false,
		bills: [],
		payTotal: "",
		beginDate: "",
		endDate: "",
		rechargeTotal: ""
	};
	cancel() {
		this.setState({
			isVisible: false
		});
	}
	onChange = value => {
		//console.log(value);
		this.setState({
			value
		});
	};
	onScrollChange = () => {
		//console.log(value);
	};
	getbilllist(beginDate, endDate) {
		//Toast.loading("加载中...", 100);
		const _that = this;
		let objs = {
			url: XHQBConfig.balanceDetails,
			params: {
				beginDate,
				endDate
			},
			_alertShow: false
		};

		yhTools.request(objs).then(res => {
			//console.log(res);
			let { bills } = res.data;
			if (res.code === "0") {
				Toast.hide();
				_that.setState({
					bills,
					payTotal: res.data.payTotal,
					rechargeTotal: res.data.rechargeTotal
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	componentDidMount() {
		//console.log(this.state.value);

		//console.log(this);
		const _that = this;

		let btn = document.getElementById("btn");
		btn.addEventListener("click", this.rightButtCallBack.bind(_that));
		/* 获取账单列表 */
		this.getbilllist();
	}
	rightButtCallBack() {
		//console.log(this);

		this.setState({
			isVisible: true
		});
	}
	getvalue() {
		//console.log(this.state.value);

		let datearr = this.state.value;
		let lastDay = new Date(datearr[0], datearr[1], 0).getDate();
		let beginDate = datearr.join("") + "01";
		let endDate = datearr.join("") + lastDay;
		//console.log(beginDate,endDate);

		/* if(datearr[1]=='1'||'3'||'5'||'7'||'8'||'10'||'12'){
      endmonth='31'
      
    }else if(datearr[1]=='4'||'6'||'9'||'') */

		/* let beginDate = datearr.join("") + "01";
    let endDate = datearr.join("") + "30"; */

		this.setState({
			isVisible: false
		});
		this.getbilllist(beginDate, endDate);
	}

	toggleVisible() {}
	render() {
		const headerParams = {
			header: {
				title: "余额明细",
				rightButt: "筛选"
			},

			history: this.props.history
			//cacheLifecycles: this.props.cacheLifecycles,
			//loadStatus: this.state.loadStatus, // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		let { bills, payTotal, rechargeTotal } = this.state;
		return (
			<div>
				<MainLayout pageParams={headerParams}>
					<div className="bill">
						<div className="billinformation">
							<div className="date">
								<p>余额明细</p>
							</div>
							<div className="information">
								<p>
									收入 ：&yen;{" "}
									{rechargeTotal
										? parseFloat(rechargeTotal / 100).toFixed(2)
										: "0.00"}{" "}
									支出 :&yen;{" "}
									{payTotal ? parseFloat(payTotal / 100).toFixed(2) : "0.00"}
								</p>
							</div>
						</div>
						<List className="my-list">
							{bills.map((item, index) => {
								return (
									<Item
										key={index}
										extra={`${item.tranType == "10" ? "-" : "+"}${
											item.tranAmount
												? parseFloat(item.tranAmount / 100).toFixed(2)
												: "0.00"
										}`}
										//align="top"
										thumb={item.tranType == "10" ? consumption : vximg}
										multipleLine
										//extra="+100.00"
										align="middle"
									>
										{item.tranType == "10" ? "消费" : "充值"}
										{/* <p className="righttext">1500.00</p> */}
										<Brief>{item.tranTime}</Brief>
									</Item>
								);
							})}
						</List>
						{/* <List className="my-list">
              <Item
                extra="+100.00"
                align="top"
                thumb={consumption}
                multipleLine
              >
                消费
                <p className="righttext">1500.00</p>
                <Brief>12-20 10:02:09</Brief>
              </Item>
            </List> */}
					</div>
					{/* <div className="bill">
            <div className="billinformation">
              <div className="date">
                <p>2019年12月</p>
              </div>
              <div className="information">
                <p>支出 ：&yen; 100.00 支出 :&yen; 80.00</p>
              </div>
            </div>
            <List className="my-list">
              <Item
                extra="+200.00"
                align="top"
                thumb={vximg}
                multipleLine
                extra="+100.00"
                align="top"
              >
                充值
                <p className="righttext">1500.00</p>
                <Brief>12-20 10:02:09</Brief>
              </Item>
            </List>
            <List className="my-list">
              <Item extra="+100.00" align="top" thumb={consumption}>
                消费
                <p className="righttext">1500.00</p>
                <Brief>12-20 10:02:09</Brief>
              </Item>
            </List>
          </div> */}

					<Modal
						visible={this.state.isVisible}
						//transparent
						//maskClosable={true}
						className="billview"
						popup
						animationType="slide-up"
					>
						<div className="btneach">
							<span className="btnViews" onClick={this.cancel.bind(this)}>
								取消
							</span>
							<span className="btnViews" onClick={this.getvalue.bind(this)}>
								确认
							</span>
						</div>
						<PickerView
							onChange={this.onChange.bind(this)}
							value={this.state.value}
							data={seasons}
							cascade={false}
						/>
					</Modal>
				</MainLayout>
			</div>
		);
	}
}
